<template lang="html">
  <a
    :href="href"
    :class="{active: isActive}"
    @click.prevent="go"
    >
    <slot></slot>
  </a>
</template>

<script>
import routes from '../routes'
export default {
  props: {
    href: {
      type: String,
      required: true
    }
  },
  computed: {
    isActive() {
      // 判断调用组件传递进来的href 是否是当前路由的路径
      return this.href === this.$root.currentRoute
    }
  },
  methods: {
    go() {
      this.$root.currentRoute = this.href
      window.history.pushState(null, routes[this.href], this.href)
    }
  }
}
</script>
